<template>
  <div class="source">
    <el-card
      class="source-card"
      shadow="hover"
    >
      <template #header>
        <span>
          <el-icon size="13">
            <ele-DocumentAdd />
          </el-icon>
          {{ $t("form.statistics.extVal") }}
        </span>
      </template>
      <t-chart
        style="width: 100%"
        class="extval-echart"
        :init-options="initOptions"
        :option="option"
        theme="tduck-echarts-theme"
      />
    </el-card>
  </div>
</template>

<script>
import TChart from "@/views/components/TChart/index.vue";
import { getFormExtValRequest } from "@/api/project/report";
import { i18n } from "@/i18n";

export default {
  components: { TChart },
  props: {
    formKey: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      initOptions: {
        renderer: "svg"
      },
      option: {
        tooltip: {
          trigger: "axis",
          extraCssText: "z-index:1"
        },
        grid: {
          top: "1%",
          left: "2%",
          right: "20%",
          bottom: "0%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: []
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: i18n.global.t("form.statistics.num"),
            type: "bar",
            barWidth: 15,
            label: {
              show: true,
              position: "right",
              color: "#1890FF",
              fontSize: 12,
              formatter: ({ data }) => {
                return `${data}`;
              }
            },
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2
            },
            data: []
          }
        ]
      }
    };
  },
  created() {
    this.getProjectExtValGroup();
  },
  methods: {
    getProjectExtValGroup() {
      getFormExtValRequest({ formKey: this.formKey }).then(res => {
        if (res.data && res.data.length) {
          this.option.xAxis.data = res.data
            .filter(item => item.name)
            .map(item => {
              return item.name ? item.name : i18n.global.t("form.statistics.other");
            });
          this.option.series[0].data = res.data
            .filter(item => item.name)
            .map(item => {
              return item.count;
            });
          this.option.xAxis.data.push(i18n.global.t("form.statistics.other"));
          // 累加空的数据
          let count = 0;
          res.data.forEach(item => {
            if (!item.name) {
              count += item.count;
            }
          });
          this.option.series[0].data.push(count);
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
:deep(.extval-echart .echarts) {
  margin-top: 30px;
  width: 90vw !important;
}
</style>
